import React from 'react';
import { history } from 'umi';
import './index.less';
import NoFoundPage from '@/pages/404';
import AudTabPage from './AudTabPage';
import AudTabs from './components/AudTabs';
import type { AudPageMenuItem } from './types';
import { intlItems } from '@/utils';
import getIcon, { Icons } from '@/utils/icon';

// _dom: React.ReactNode 参数目前没用，先不加，后期有用的时候在加回来。
export default function PageTabs(): React.ReactNode {
  const audTabpage = AudTabPage.getInstance();
  const { location } = history;
  audTabpage.showPage(location as unknown as Location);
  // 显示 404 页
  if (audTabpage.notfind) {
    return <NoFoundPage />;
  }
  return (
    <AudTabs
      tabs={audTabpage.tabs}
      popMenu={{
        items: intlItems(
          'component.pageTab',
          [
            // {
            //   key: 'refresh',
            //   title: '刷新',
            //   icon: <ReloadOutlined />
            // },
            {
              key: 'closeCur',
              title: '关闭当前页',
              icon: getIcon('FileExcel'), // <FileExcelOutlined />
            },
            {
              key: 'closeOther',
              title: '关闭其它页',
              icon: getIcon('FileExcel'),
            },
            {
              key: 'closeAll',
              title: '关闭所有页',
              icon: <Icons.FileExcelOutlined />,
            },
          ],
          'key',
        ),
        onClick: (key: AudPageMenuItem) => {
          setTimeout(() => {
            audTabpage.closeTab(key);
            history.push(audTabpage.activeTabKey);
          }, 10);
        },
      }}
      activeTabKey={audTabpage.activeTabKey}
      onChange={(activeKey) => {
        history.push(activeKey);
      }}
      onEdit={(targetKey, action) => {
        if (action === 'remove') {
          const p = audTabpage.closeTabByKey(targetKey as string);
          history.push(p as string);
        }
      }}
    />
  );
}

export { AudTabPage };
